<template>
  <div
    class="flex items-center h-screen justify-center"
    style="position: relative"
  >
    <UniCosImage
      :isDark="isDark ? 'dark' : 'light'"
      class="fixed top-0 left-0 dark-img w-screen h-screen"
      :src="API.COS_MAIN_DARK_IMAGE_URL"
      :format="CosImgFormatSuffix.WEBP"
    ></UniCosImage>
    <UniCosImage
      :isDark="isDark ? 'dark' : 'light'"
      class="fixed top-0 left-0 light-img w-screen h-screen"
      :src="API.COS_MAIN_LIGHT_IMAGE_URL"
      :format="CosImgFormatSuffix.WEBP"
    ></UniCosImage>
    <div
      class="w-full h-1/3 flex justify-center text-3xl absolute top-0 left-0 items-center flex-col"
      style="color: var(--color); font-style: italic; font-weight: bold"
    >
      <div class="flex flex-col gap-2">
        <div style="opacity: 0">Life is a coding,I will debug it...</div>
        <UniLoadingText
          @loadComplete="isLoadComplete_Text = true"
          :duration="20"
          content="Life is a coding,I will debug it..."
        ></UniLoadingText>
        <div
          class="flex gap-4 w-full"
          style="height: 3rem"
        >
          <template v-for="(item, index) in options">
            <Transition
              appear
              name="option-loading"
            >
              <div
                v-if="index < renderCounter"
                class="option-box transition-opacity"
              >
                <OhVueIcon
                  :scale="1.5"
                  :name="item.icon"
                  @click="onClickOption(item)"
                ></OhVueIcon>
              </div>
            </Transition>
          </template>
        </div>
      </div>
    </div>
    <UniColorToggle
      style="position: fixed; top: 2rem; right: 2rem"
    ></UniColorToggle>
  </div>
</template>

<script lang="ts" setup>
import { OhVueIcon } from "oh-vue-icons";
import { API } from "~/models/api";
import { CosImgFormatSuffix } from "~/models/cos";

const options: {
  url: string;
  icon: string;
}[] = [
  {
    url: "/",
    icon: "si-homeassistantcommunitystore",
  },
  {
    url: "/",
    icon: "fa-calendar-day",
  },
  {
    url: "gitee",
    icon: "fa-github-square",
  },
  {
    url: "/blog/",
    icon: "si-facebookgaming",
  },
  {
    url: "/user/",
    icon: "md-settingsapplications-round",
  },
];
const { width, height } = useWindowSize();
const renderCounter = ref(0);
const renderCounterIncrement = (time: number) => {
  renderCounter.value++;
  if (renderCounter.value < options.length) {
    setTimeout(() => renderCounterIncrement(time), time);
  }
};

const isDark = useDark();
const isLoadComplete_Text = ref(false);
const onClickOption = async (option: { url: string; icon: string }) => {
  switch (option.url) {
    case "/":
      await navigateTo("/");
      break;
    case "/blog/":
      await navigateTo("/blog/");
      break;
    case "/user/":
      await navigateTo("/user/");
      break;
  }
};

onMounted(async () => {
  await nextTick();
});

watch(isLoadComplete_Text, (newVal) => {
  renderCounterIncrement(80);
});
</script>

<style lang="scss" scoped>
.dark-img {
  transition: all 1s ease-in-out;
  &[isDark="dark"] {
    opacity: 1;
  }
  &[isDark="light"] {
    opacity: 0;
  }
}

.light-img {
  transition: all 1s ease-in-out;

  &[isDark="dark"] {
    opacity: 0;
  }
  &[isDark="light"] {
    opacity: 1;
  }
}

.option-box {
  opacity: 0.2;
  &:hover {
    cursor: pointer;
    opacity: 1;
  }
}

.option-loading-enter-active {
  animation: option-loading-in 0.8s;
}

@keyframes option-loading-in {
  0% {
    // transform: translateX(5vmax);
    transform: translateY(3rem);
    opacity: 0;
  }
  80% {
    // transform: translateX(-0.5vmax);
    transform: translateY(-0.5rem);

    opacity: 1;
  }
  100% {
    transform: translateY(0rem);

    // transform: translateX(0vmax);
    opacity: 0.2;
  }
}
</style>
